<template>
  <view>
    <calculator-component 
      operation="add"
      :initialNum1="num1"
      :initialNum2="num2"
      @result="handleResult"
    />
    <view class="resultView">
      <view>计算结果：</view>
      <view>
        <template v-if="result !== null">
          {{ num1 }} + {{ num2 }} = {{ result }}
        </template>
        <template v-else-if="error">
          <text class="error">{{ error }}</text>
        </template>
        <template v-else>
          请输入数字
        </template>
      </view>
    </view>

  </view>
</template>

<script>
import CalculatorComponent from '@/pages/components/calculator/calculator.vue'

export default {
  components: {
    CalculatorComponent
  },
  data() {
    return {
      num1: 0,
      num2: 0,
      result: null,
      error: ''
    }
  },
  methods: {
    handleResult(data) {
      this.num1 = data.num1
      this.num2 = data.num2
      this.result = data.result
      this.error = data.error
    }
  }
}
</script>
<style>
	.resultView {
		margin: 10px;
	}
</style>